<template>
  <div class="main-container">
    <div class="title-area">Mitt Data Receiver</div>
    <div class="divider-line"></div>
    <div class="num-area">Data: [{{ num === null ? 'null' : num }}]</div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { emitter } from '../../../modules/event-bus';

const num = ref<number | null>(null);

// onMounted只会执行一次，且发生在“当前Ref组件第一次被渲染完成并完成挂载”
onMounted(() => {
  emitter.on('share-number', (val: unknown) => {
    if (typeof val === 'number') {
      console.log('MittDemo-RightPage:', val)
      num.value = val;
      return;
    }
    console.log('MittDemo-RightPage:', 'Not a number')
  })
})

onUnmounted(() => {
  emitter.off('share-number');
})
</script>

<style scoped>
.main-container {
  width: 100%;
  background-color: rgb(76, 100, 252);
  display: flex;
  flex-direction: column !important;

  .title-area {
    margin: 0 auto;
  }
}
</style>